<template>
    <HeadImage :background="backPath">
        {{disposition[0]}}
        <p slot="two" class="head">
         {{disposition[1]}}
        </p>
    </HeadImage>
  <div class="box">
      <div class="messageArea">
          <h1 class="title"
              :style="{
        'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c',
       }">留言板</h1>
         <MessageWordPad
                 class="wordPad"
                 @handleCommentAdd="handleCommentAdd"
                 :style="{
                     'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c',
                     'background':'rgba(255,255,255,0.6)',
                     'box-shadow': $store.state.nowTime==='moon' ?
                           '0 1px 1px 0 rgba(248, 247, 247, 1), 0 1px 5px 0 rgba(250, 247, 247, 1)'
                           :'0 5px 10px rgba(0,0,0,.1)',}"></MessageWordPad>
          <ul v-if="skeleton">
              <li v-for="item in message" :key="item.id"
                  :style="{
                        'box-shadow': $store.state.nowTime==='moon' ?
                           '0 1px 1px 0 rgba(248, 247, 247, 0.9), 0 1px 5px 0 rgba(250, 247, 247, 0.9)' :' 0 5px 10px rgba(0,0,0,.1)',
                            'background':'rgba(255,255,255,0.6)'
                           }">
                            <div class="left_">
                                <img :src="user_img(item.auto)" class="user_img" alt=""></div>
                     <div class="right_">
                          <div>
                              <img class="system" :src="item.system.split(',')[0]" alt="">
                              <img class="system" :src="imgSystem(item.system)[1]" alt="">
                          </div>
                      <p style="margin-top: 5px" v-html="item.content"></p>
                      <br>
                      <span>{{dayjs(item.dateTime).format('YYYY/MM/DD')}}</span>
                    </div>
              </li>
              <div :class="{'next':true,
                     'title_shadow':$store.state.nowTime==='moon',
                     'content_shadow':$store.state.nowTime==='moon'}"
                   :style="{'background': $store.state.nowTime==='moon' ? '#262525' : '#fff','color':'#8f8c8c',marginTop:'10px'}">
                  <span v-if="next_" @click="next">下一页</span>
                  <span v-else>没有更多了</span>
              </div>
          </ul>
          <div v-else class="circle_box">
             <CircleLoading></CircleLoading>
          </div>
      </div>
  </div>
</template>

<script>
import HeadImage from "@/components/PublicComponents/HeadImage.vue";
import CommentReplies from "@/components/detail/CommentReplies.vue";
import Detail from "@/components/detail/Detail.vue";
import ReplyBox from "@/components/detail/ReplyBox.vue";
import LoveNavigation from "@/components/love/LoveNavigation.vue";
import BlessingMessage from "@/components/love/BlessingMessage.vue";
import WordPad from "@/components/love/WordPad.vue";
import api from "@/api";
import dayjs from "dayjs";
import MessageWordPad from "@/components/MessageBoards/MessageWordPad.vue";
import SiteInformation from "@/components/PublicComponents/SiteInformation.vue";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";

export default {
    name: "MessageBoards",
    components: {
        CircleLoading,
        SiteInformation,
        MessageWordPad, WordPad, BlessingMessage, LoveNavigation, ReplyBox, Detail, CommentReplies, HeadImage},
    data(){
        return{
            backPath: "/img/common/t0126965e612a7835ac.jpg",
            system_img:[],
            auto:'905102975',
            message:[],
            index:1,
            next_:true,
            disposition:"",
            skeleton:false,
        }
    },
    mounted() {
        let writing = JSON.parse(window.localStorage.getItem("DataContent"));
        setTimeout(()=>{
            if(writing){
                this.disposition = writing[5].content.split("|||||");
                this.backPath = writing[6].content;
            }
        },100)
        this.getMessage();

    },
    watch:{
        message(newValue,oldValue){
            this.message = newValue;
            if(newValue !== ""){
                setTimeout(()=>{
                    this.skeleton = true
                },100)
            }

        },
    },
    methods:{
        getMessage(){
            api.MessageGet(this.index).then((res)=>{
                this.message = res.data.data;
            })
        },
        imgSystem(system){
            return system.split(',')
        },
        dayjs,
        next(){
            this.index++;
            api.MessageGet(this.index).then((res)=>{
                if(res.data.data.length<1)
                    this.next_ = false;
                    this.message = this.message.concat(res.data.data);
            })
        },
        user_img(auto){
            return 'https://q1.qlogo.cn/g?b=qq&nk='+auto+'&s=640';
        },
        handleCommentAdd(message){
            setTimeout(()=>{
                api.MessageGet(1).then((res)=>{
                    this.message = res.data.data;
                })
            },500)
        }
    }
}
</script>

<style scoped>

.circle_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 180px;
    border-radius:5px;
    margin-top: 50px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: rgba(246, 247, 248, 0.7);
}
.head{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem
}
.head img{
    margin-left: 5px;
    width: 25px ;
    margin-top: 5px;
}
.box{
    width: 80vw;
    max-width: 600px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@keyframes lis {
    0%{
        opacity: 0;
       transform: translateY(-10px);
     }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }

}
.messageArea {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 900px;
    padding: 10px;
    animation: lis .3s ease-in-out 0s 1 forwards;
}

.messageArea .title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    text-align: center;
    color: #8f8c8c;
    margin-bottom: 30px;
}


.user_img{
    width: 45px;
    height: 45px;
    border-radius: 3px;
    box-shadow: 0 0 1px 0 #939090, 0 1px 10px 0 #b2afaf;
}

ul{
    position: relative;
    width: 100%;
    list-style: none;
    margin-top: 50px;
    margin-bottom: 30px;
}
ul li{
    padding: 15px 20px;
    width: 100%;
    border-radius: 3px;
    margin-bottom: 30px;
    display: flex;
    transition: all .3s;
}
li:hover{
    transform: translateY(-3%);
}
.left_{
    margin-right: 10px;
    height: 100%;
}
.right_{
    height: 100%;

}
.right_ p{
    padding: 5px;
    flex-wrap: wrap;
    letter-spacing: 1.5px;
    line-height: 17px;
    font-size: 15px;
    background: rgb(30, 31, 34);
    border-radius: 3px;
    color: #8f8c8c;
    background: rgba(235,238,245);
    border: 0;
    word-break: break-all;
}
.system{
    width: 15px;
    height: 15px;

}
span{
    background: transparent;
    color: #8f8c8c;
}
.system:last-child{
    margin-left: 5px;
}
.wordPad{
    width: 880px;
}
.next{
    padding: 5px 10px;
    width: 100px;
    background: white;
    margin: auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    cursor: pointer;
    animation: next 1.5s ease-in-out 0s infinite forwards;
}
.next:hover{
    opacity: .8;
}
.next span{
    font-size: 14px;
    animation: images .3s ease-in-out 0s 1 forwards;
}

@keyframes images {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}

@media (min-width: 700px) and (max-width: 1000px) {
    .messageArea {
        width: 650px !important;
    }
    .wordPad{
        width: 650px;
    }

}
@media (min-width:600px) and (max-width: 700px) {
    .wordPad{
        width: 500px;
    }
    .messageArea {
        width: 500px;
    }
}
@media (min-width:0px) and (max-width: 600px) {
    .messageArea {
        width: 380px;
    }
    .wordPad{
        width: 370px;
    }
}
</style>